<template>
 <el-row>
   <el-card class="box-card">

     <!-- 模糊查询    -->
     <el-form :inline="true" style="float: right"  :model="videoAttention" class="demo-form-inline">
       <el-form-item style="float:left " label="">
         <el-input @input="onSubmit()" v-model="videoAttention.videoTitle" placeholder="请输入视频标题"></el-input>
       </el-form-item>
     </el-form>
     <!--数据-->
     <el-table
         ref="singleTable"
         :data="videoQuery"
         highlight-current-row
         tooltip-effect="dark"
         style="width: 100%">
       <el-table-column
           type="index"
           label="序号"
       >
       </el-table-column>
       <el-table-column
           property="video_title"
           label="视频标题">
       </el-table-column>
       <el-table-column
           property="video_cover"
           label="被下架视频"
       >
         <template slot-scope="scope">
           <el-image :src="scope.row.video_cover" style="width: 80px;height: 50px"></el-image>
         </template>
       </el-table-column>
       <el-table-column
           property="remark"
           label="下架原因">
       </el-table-column>
       <el-table-column
           label="操作"
       >
         <template slot-scope="scope">
           <el-link type="success" @click="videoDelbyid(scope.row.video_id)">删除</el-link>
         </template>
       </el-table-column>
       <div v-if="videoQuery==''" style="text-align: center">
         <img src="../../assets/img/nodata.png">
       </div>
     </el-table>

   </el-card>

   <el-row>
     <el-pagination
         style="text-align: center"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="pageNum"
         :page-sizes="pageSizes"
         :page-size="pageSize"
         layout=" sizes, prev, pager, next, jumper"
         :total="total">
     </el-pagination>
   </el-row>
 </el-row>
</template>

<script>
import {VideoSold} from "../../api/video/video";
import {QueryFansParticulars} from "../../api/fans/fans";
export default {
  name: "spacecollect",
  data(){
    return{
      videoAttention:{
        videoTitle:'',
      },
      videoQuery:[],
      currentPage: 1,
      total: 10, // 总条目数
      pages: 5,  // 总页数
      pageNum: 1, // 当前的页码
      pageSizes: [5, 10, 15, 20, 30, 40, 50], // select选项设置：条/页
      pageSize: 10, // 每页显示条目个数
    }
  },
  created() {
    let user = JSON.parse(sessionStorage.getItem('user'));
    if (user!=null&&user!=''){
      this.videoSole();
    }
  },
  methods:{
    videoDelbyid(val){
      console.log(val);
    },
    onSubmit(){
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      VideoSold(userId,this.videoAttention.videoTitle,this.pageNum,this.pageSize).then(result=>{
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.videoQuery=result.data.list;
      });
    },
    /**
     * 查询被下架的视频
     */
    videoSole(){
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      VideoSold(userId,null,this.pageNum,this.pageSize).then(result=>{
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.videoQuery=result.data.list;
      })
    },
    /**
     * 分页方法
     * @param val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.queryFansParticulars();
    },
    /**
     * 分页方法
     * @param val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryFansParticulars();
    },
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
.box-card {
  width: 100%;
}
</style>
